<style lang=less>
	@import '../../assets/public.less';
	@import './security.less';
	@import './children/change_pwd.less';
</style>
<template>
	<div class="security_main">
		<div class="security_main_title">
			<h2>{{$t("security.name[0]")}}</h2><!--账号安全-->
		</div>
		<!--基本信息-->
		<div class="information">
			<div class="information_header">
				<h2>{{$t("security.information[0]")}}</h2><!--基本信息-->
			</div>
			<div class="information_cont">
				<ul class="lis_warp">
					<li class="lis">
						<span class="name">{{$t("security.information[1]")}}:</span><!--账号-->
						<span class="num">{{userData.mobile}}</span>
					</li>
					<li class="lis">
						<span class="name">UID:</span>
						<span class="num">{{userData.uid}}</span>
					</li>
					<li class="lis">
						<span class="name">{{$t("security.information[2]")}}:</span><!--登录密码-->
						<span class="num">{{userData.opwd}}</span>
						<a href="javascript:;" class="modify" @click="change_router('changeopwd')">{{$t("security.information[4]")}}</a><!--修改-->
					</li>
					<li class="lis">
						<span class="name">{{$t("security.information[3]")}}:</span><!--交易密码 / 资金密码-->
						<span class="num">{{userData.tpwd}}</span>
						<a href="javascript:;" class="modify" @click="change_router('changetpwd')" v-if="!userData.tpwd">{{$t("security.information[5]")}}</a><!--设置-->
						<a href="javascript:;" class="modify" @click="change_router('changetpwd')" v-else>{{$t("security.information[4]")}}</a><!--修改-->
					</li>
				</ul>
			</div>
		</div>
		<!--双重身份验证-->
		<div class="authentication">
			<div class="authentication_header">
				<h2>{{$t("security.verify[0]")}}</h2><!--双重身份验证-->
			</div>
			<div class="authentication_cont">
				<ul class="lis_warp">
					<li class="lis gj_warp">
						<span class="name">{{$t("security.verify[1]")}}:</span><!--安全等级-->
						<div class="grade_warp">
							<span class="box" v-for="v in userData.user_level"></span>
							<span class="grade" v-if="userData.user_level == 1">{{$t("security.leavel[0]")}}</span><!--低-->
							<span class="grade" v-if="userData.user_level == 2">{{$t("security.leavel[1]")}}</span><!--中-->
							<span class="grade" v-if="userData.user_level == 3">{{$t("security.leavel[2]")}}</span><!--高-->
						</div>
						<span class="info" v-show="userData.user_level != 3">{{$t("security.verify[8]")}}</span><!--强烈建议开启2项双重身份验证-->
					</li>
					<li class="lis">
						<span class="name">
							<i class="el-icon-warning" v-if="!userData.email"></i>
							<i class="el-icon-success" v-else></i>
							{{$t("security.verify[2]")}}:<!--邮箱-->
						</span>
						<span class="num">{{userData.email}}</span>
						<span class="info">{{$t("security.verify[3]")}}</span><!--一旦绑定不可修改-->
						<a href="javascript:;" class="modify" @click="change_router('changeemail')" v-show="!userData.email">{{$t("security.verify[4]")}}{{userData.email}}</a><!--绑定-->
					</li>
					<li class="lis">
						<span class="name">
							<i class="el-icon-success"></i>
							{{$t("security.verify[5]")}}:<!--手机号-->
						</span>
						<span class="num">{{userData.mobile}}</span>
						<span class="info">{{$t("security.verify[6]")}}</span><!--用于提币，找回密码-->
						<a href="javascript:;" class="modify" @click="change_router('changemobile')">{{$t("security.verify[7]")}}</a><!--修改-->
					</li>
					 <!-- <li class="lis">
						<span class="name">
							<i class="el-icon-warning" v-if="userData.google"></i>
							<i class="el-icon-success" v-else></i>
							谷歌验证:
						</span>
						<span class="num">{{userData.google=='0'?'未绑定':'已绑定'}}</span> -->
						<!--用于提币，找回密码，-->
						<!-- <span class="info">用于登录，提币，修改安全设置，找回密码</span>
						<a href="javascript:;" class="modify" @click="change_router('googleverify')" v-show="!userData.google">绑定</a>
					</li> -->
				</ul>
			</div>
		</div>
		<div class="payment">
			<div class="payment_header">
				<h2>{{$t("security.paytype[0]")}}</h2><!--支付方式-->
				<span class="tishi">{{$t("security.paytype[1]")}}</span><!--请务必使用您本人的实名账号，被激活的支付方式将在交易时向买方展示-->
			</div>
			<div class="payment_cont">
				<div class="obox_null obox" v-show="payMethod.length == 0">
					<p>{{$t("security.paytype[2]")}}</p><!--您暂时没有添加任何支付方式-->
					<p class="add_pay" @click="add_pay()">{{$t("security.paytype[3]")}}</p><!--点击添加支付方式-->
				</div>
				<div class="obox_show obox" v-show="payMethod.length!=0">
					<ul class="lis_warp">
						<li class="lis" v-for="(v,k) in payMethod">
							<i v-if="v.type == 'wx'">
								<i class="icon iconfont icon-weixin wx"></i>
							</i>
							<i v-else-if="v.type == 'alipay'">
								<i class="icon iconfont icon-zhifubao alipay"></i>
							</i>
							<i v-else-if="v.type == 'backcard'">
							<i class="icon iconfont icon-yinhangka car"></i>
							</i>
							<span class="type">{{v.tip}}</span>
							<span class="mobile">{{v.number}}</span>
							<span class="name">{{v.name}}</span>
							<span class="eit" @click="edit(v.id,v.type,k)" v-show="payMethod[k].status != 0">{{$t("security.paytype[4]")}}</span><!--修改-->
							<span class="" v-show="payMethod[k].status == 0">{{$t("security.paytype[4]")}}</span><!--修改-->
							<el-switch v-model="payMethod[k].status" @change="changeSwitch(payMethod[k].status , v.type)" active-color="#409EFF" inactive-color="#dcdfe6" active-value='1' inactive-value='0'>
							</el-switch>
						</li>
					</ul>
					<div class="add_play">
						<span @click="add_pay()">{{$t("security.paytype[5]")}}</span><!--添加支付方式-->
					</div>
				</div>
			</div>
		</div>
		<!--日志-->
		<div class="journal">
			<el-tabs v-model="activeName">
				<el-tab-pane :label='$t("security.loginhis[0]")' name="first"><!--登录历史-->
					<p class="no_list" v-show="History.LoginHistory.length == 0">{{$t("security.loginhis[4]")}}</p><!--暂无记录-->
					<ul class="lis_warp" v-show="History.LoginHistory.length != 0">
						<li class="nav">
							<span>{{$t("security.loginhis[1]")}}</span><!--时间-->
							<span>{{$t("security.loginhis[2]")}}</span><!--登录方式-->
							<span>IP</span>
							<span class="zt">{{$t("security.loginhis[3]")}}</span><!--状态-->
						</li>
						<li class="lis" v-for="(v,k) in History.LoginHistory">
							<span>{{v.time}}</span>
							<span>{{v.AgentInfo}}</span>
							<span>{{v.ip}}</span>
							<span class="zt">{{v.status}}</span>
						</li>
					</ul>
					<div v-show="History.LoginHistory.length != 0">
						<el-pagination background layout="prev, pager, next" :total="parseInt(History.LoginHistorySize)" @current-change="current_change" :page-size='History.size'></el-pagination>
					</div>
				</el-tab-pane>
				<el-tab-pane :label='$t("security.safehis[0]")' name="second"><!--安全设置历史-->
					<p class="no_list" v-show="History.LafeLog.length == 0">{{$t("security.loginhis[4]")}}</p><!--暂无记录-->

					<ul class="lis_warp" v-show="History.LafeLog.length != 0">
						<li class="nav">
							<span>{{$t("security.safehis[1]")}}</span><!--时间-->
							<span>{{$t("security.safehis[2]")}}</span><!--安全设置-->
							<span></span>
							<span class="zt">IP</span>
						</li>
						<li class="lis" v-for="(v,k) in  History.LafeLog">
							<span>{{v.time}}</span>
							<span>{{v.memo}}</span>
							<span></span>
							<span class="zt">{{v.ip}}</span>
						</li>
					</ul>
					<div v-show="History.LafeLog.length != 0">
						<el-pagination background layout="prev, pager, next" :total="parseInt(History.LafeLogSize)" @current-change="current_change1" :page-size='History.size'></el-pagination>
					</div>
				</el-tab-pane>
			</el-tabs>

		</div>
		<!--弹框-->
		<div tabindex="-1" role="dialog" aria-modal="true" aria-label="提示" class="el-message-box__wrapper" style="z-index: 2064;" :style="isDisplay"><!--提示-->
			<div class="el-message-box">
				<div class="el-message-box__header">
					<div class="el-message-box__title">
						<span>{{$t("security.paytype[5]")}}</span><!--添加支付方式-->
					</div>
					<button type="button" aria-label="Close" class="el-message-box__headerbtn" @click="close_moble()">
						<i class="el-message-box__close el-icon-close" ></i>
					</button>
				</div>
				<div class="el-message-box__content">
					<el-select v-model="select_value" placeholder="请选择" @change='change(select_value)' :disabled='dis' ><!--请选择-->
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
					<router-view/>
				</div>

			</div>
		</div>
		<div class="v-modal" tabindex="0" style="z-index: 2063;" :style="isDisplay"></div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				options: [{
					value: 'backcard',
					label: this.$t("security.mode[0]"),//银行卡
				}, {
					value: 'wx',
					label: this.$t("security.mode[1]"),//微信
				}, {
					value: 'alipay',
					label: this.$t("security.mode[2]"),//支付宝
				}],
				select_value: 'backcard', //初始显示标志位
				dis:false,   //支付方式是否可改标志位
				activeName: 'first',
				isDisplay: 'display:none', //弹框标志位
				//用户个人信息
				userData: {
					mobile: '--', //账号
					uid: '--', //uid
					opwd: '--', //登录密码
					tpwd: '--', //交易密码
					email: false, //邮箱
					status: '', //安全登录
					smrz: '', //普通认证状态
					google:''
				},
				//Payment method 支付方式列表
				payMethod: [],
				History: {
					size: 5, //显示条数
					LoginHistorySize: '', //登录历史页数
					LafeLogSize: '', //安全设置历史页数
					LoginHistory: [], //登录历史
					LafeLog: [] //安全设置历史
				}
			};
		},
		methods: {
			getData() {
				var _this = this;
				//个人中心数据
				_this.$http.post(_this.$http.user_info, {}).then(function(response) {
					if(response.data.status == "200") {
						var tpwd = response.data.data.tpwd == false ? '' : response.data.data.tpwd; //登录密码
						var email = response.data.data.email == false ? '' : response.data.data.email; //登录密码
						var google = response.data.data.google == false ? '' : response.data.data.command; //登录密码
						_this.userData = {
							mobile: response.data.data.mobile, //账号
							uid: response.data.data.uid, //uid
							opwd: response.data.data.opwd,
							tpwd: tpwd, //交易密码
							email: email, //邮箱
							status: response.data.data.status, //安全登录
							user_level: response.data.data.user_level, //安全登录
							smrz: response.data.data.smrz, //认证状态标识
							google:google				   //谷歌验证						
						};
						//缓存姓名 
						sessionStorage.name = response.data.data.name;
					} else {
						_this.$public.msg(response.data.msg, 'warning', _this);
					}
				}).catch(function(error) {});
				//获得支付方式列表
				_this.$http.post(_this.$http.pay_list, {}).then(function(response) {
					if(response.data.status == "200") {
						_this.payMethod = response.data.data;
					} else {
						_this.$public.msg(response.data.msg, 'warning', _this);
					}
				}).catch(function(error) {});

			},
			//登录历史
			getLoginHistory(i) {
				var _this = this;
				_this.$http.post(_this.$http.user_aq, {
					p: i,
					size: _this.History.size
				}).then(function(response) {
					if(response.data.status == "200") {
						_this.History.LoginHistory = response.data.data.login_log;
						_this.History.LoginHistorySize = Number(response.data.data.login_count);
					} else {
						_this.$public.msg(response.data.msg, 'warning', _this);
					}
				}).catch(function(error) {});
			},
			//安全设置历史
			LafeLog(i) {
				var _this = this;
				_this.$http.post(_this.$http.user_aq, {
					p: i,
					size: _this.History.size
				}).then(function(response) {
					if(response.data.status == "200") {
						_this.History.LafeLog = response.data.data.safe_log
						_this.History.LafeLogSize = Number(response.data.data.safe_count);
						
					} else {
						_this.$public.msg(response.data.msg, 'warning', _this);
					}
				}).catch(function(error) {});
			},
			//点击修改密码路由跳转
			change_router(whitch) {
				var _this = this;
				_this.$router.push({
					path: whitch
				})
			},
			//添加支付方式执行函数
			add_pay() {
				var _this = this;
				_this.dis = false;  //支付方式可修改
				if(_this.userData.status == '1' || _this.userData.status == '4' ) {
					_this.$confirm(_this.$t("security.addpay[0]"), _this.$t("security.addpay[1]"), {//您还没有通过身份认证, 前往身份认证?
						confirmButtonText: _this.$t("security.addpay[2]"),
						cancelButtonText: _this.$t("security.addpay[3]"),
						type: 'warning'
					}).then(() => {
						_this.$public.go('authentication',10,_this);
						
					}).catch(() => {
						_this.$message({
							type: 'info',
							message: _this.$t("security.addpay[4]")
						});
					});
					return false;

				}else if(_this.userData.status =='2' ){
					_this.$public.msg(_this.$t("security.addpay[5]"), 'warning', _this);//您的信息正在审核中，暂不能进行此操作
					return false;
				}
				_this.select_value = 'backcard'; //初始显示标志位			
				_this.isDisplay = 'display:block';
				_this.$router.push({
					name: 'backcard',
					query: {
						type: 'backcard'
					}
				})
			},
			//关闭弹框
			close_moble() {
				var _this = this;
				console.log(1);
				_this.isDisplay = 'display:none';
				_this.$router.push({
					path: '/security',
				})
			},
			//下拉框改变执行函数
			change(value) {
				var _this = this;
				_this.$router.push({
					path: value,
					query: {
						type: value
					}
				})
			},
			//开光执行函数
			changeSwitch(switch_value, type) {
				var _this = this;
				_this.$http.post(_this.$http.set_pay_status, {
					type: type,
					val: switch_value
				}).then(function(response) {
					if(response.data.status == "200") {
						//						_this.$public.msg(response.data.msg, 'success', _this);
						_this.$public.msg(_this.$t("security.changeSwitch[0]"), 'success', _this);
					} else {
						_this.$public.msg(response.data.msg, 'warning', _this);
					}
				}).catch(function(error) {});

			},
			//编辑执行函数
			edit(id, type, k) {
				var _this = this;
				_this.dis = true;  //支付方式不可修改
				if(_this.payMethod[k].status == 0) {
					_this.$public.msg(_this.$t("security.edit[0]"), 'warning', _this);
					return false;
				}
				_this.isDisplay = 'display:block';
				_this.select_value = type;
				_this.$router.push({
					name: type,
					query: {
						type: type,
						id: id
					}
				})
			},
			current_change(i) {
				
				var _this = this;
				var item = Number(i);
				_this.getLoginHistory(item);

			},
			current_change1(i) {
				var _this = this;
				var item = Number(i);
				_this.LafeLog(item);

			}
		},
		created: function() {
			var _this = this;
			_this.getData();
			_this.getLoginHistory(1);
			_this.LafeLog(1);
			_this.$public.scrollTop(); //返回但最顶部函数			
		},
		watch: {
			'$route': function(route) {
				var _this = this;
				if(route.query.flat == 'ok') {
					_this.isDisplay = 'display:none';
					_this.getData();

				}
			},
		}

	};
</script>
<style scoped="scoped">

	.index_main {
		background: #FFFFFF;
	}
	
	.el-message-box__wrapper {
		z-index: 1000 !important;
	}
	
	.el-message-box {
		width: 460px;
	}
	
	.v-modal {
		z-index: 999 !important;
	}
	
	.el-message-box__header {
		padding-top: 25px;
	}
	
	.el-select {
		left: 20px;
	}
</style>